<template>
  <div class="soilStat_wrapper">
    <div class="soil_title">
      <div>土壤墒情监测统计平台</div>
      <div>SOIL MOISTURE MONITORING PLATFORM</div>
    </div>
    <div class="soil_btns">
      <div class="btn_left">
        <div>实时监测</div>
        <div>数据分析</div>
      </div>
      <div class="btn_right">
        <div>统计分析</div>
        <div>退出大屏</div>
      </div>
    </div>
    <div class="soil_total">
      <template v-for="(item, i) in state.data1" :key="i">
        <div :class="'soil_divs' + (i + 1)">
          <div>{{item.name}}</div>
          <div>{{item.value}}</div>
        </div>
      </template>
    </div>
    <div class="soil_body">
      <div class="body_left">
        <div class="div_title">土壤参数</div>
        <div class="echarts_box">
          <echarts-box :option="state.circle1"></echarts-box>
        </div>
        <div class="echarts_box">
          <echarts-box :option="state.circle2"></echarts-box>
        </div>
      </div>
      <div class="body_middle">
        <div class="middle_top">
          <div class="div_title">土壤墒情趋势走势</div>
          <div class="echarts_box">
            <echarts-box :option="state.soil1"></echarts-box>
          </div>
        </div>
        <div class="middle_bottom">
          <div class="div_title">年土壤墒情总体情况</div>
          <div class="table_div">
            <div class="table_list" v-for="(item, i) in state.tableDate" :key="i">
              <div>{{ item.first }}</div>
              <div>{{ item.second }}</div>
              <div>{{ item.third }}</div>
              <div>{{ item.forth }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="body_right">
        <div class="right_top">
          <div class="div_title">地图参数</div>
          <div class="div_map">
            <img src="@/images/soil/map.png" alt="" />
          </div>
        </div>
        <div class="right_bottom">
          <div class="div_title">土壤墒情趋势走势</div>
          <div class="echarts_box">
            <echarts-box :option="state.zhu3"></echarts-box>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import echartsBox from "@/components/echarts-box.vue";
import * as echarts from "echarts";
import { reactive } from "vue-demi";
const state = reactive({
  data1:[
    {name:'长春市',value:'9，289，218'},
    {name:'双阳区',value:'8，549，108'},
    {name:'九台区',value:'7，889，544'},
    {name:'农安县',value:'2，089，417'},
    {name:'榆树市',value:'1，189，067'},
    {name:'德惠市',value:'3，249，012'},
  ],
  soil1: {
    backgroundColor: "rgba(0,0,0,0)",
    grid: { top: "10%", left: "8%", right: "5%", bottom: "10%" },
    tooltip: {
      trigger: "axis",
      formatter: "{b0}({a0}): {c0}<br />{b1}({a1}): {c1}%",
    },
    legend: {
      data: ["土壤墒情", "空气湿度"],
    },
    xAxis: {
      axisTick: {
        //x轴刻度线
        show: false,
      },
      axisLabel: { show: false }, //显示x轴的数值

      data: [
        "玉米",
        "水稻",
        "小麦",
        "玉米1",
        "水稻1",
        "小麦1",
        "玉米2",
        "水稻2",
      ],
    },
    yAxis: [
      {
        type: "value",
        // name: "数据1",
        show: true,
        scale: true,
        max: 100,
        min: 0,
        splitNumber: 5,
        boundaryGap: [0.2, 0.2],
        // axisLabel: { show: false }, //显示x轴的数值

        axisLine: {
          lineStyle: {
            color: "#5e859e",
            width: 2,
          },
        },
      },
      {
        type: "value",
        // name: "数据2",
        min: 0,
        max: 100,
        interval: 10,
        // axisLabel: { show: false }, //显示x轴的数值

        axisLine: {
          lineStyle: {
            color: "#5e859e", //纵坐标轴和字体颜色
            width: 2,
          },
        },
      },
    ],
    series: [
      {
        name: "土壤墒情",
        type: "bar",
        barWidth: 15,
        itemStyle: {
          barBorderRadius: [6, 6, 0, 0],
        },
        data: [15, 20, 35, 40, 50, 60, 99, 88],
      },
      {
        name: "空气湿度",
        type: "line",
        smooth: true,
        symbolSize: 8, //设定实心点的大小
        yAxisIndex :1,
        itemStyle: {
          normal: {
            color: "#fff", //改变折线点的颜色
            lineStyle: {
              color: "#E85D61", //改变折线颜色
              width: 5, // 0.1的线条是非常细的了
            },
          },
        },
        data: [15, 30, 21, 20, 20, 30, 50, 90],
      },
    ],
  },

  //   饼图1
  circle1: {
    backgroundColor: "rgba(0,0,0,0)",
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: (list) => {
              // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
              var colorList = [
                {
                  colorStart: "#FF579C",
                  colorEnd: "#FF4B5C",
                },
                {
                  colorStart: "#3E40F4",
                  colorEnd: "#14C0F8",
                },
                {
                  colorStart: "#3E40a4",
                  colorEnd: "#14C0a8",
                },
              ];
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  //左、下、右、上
                  offset: 0,
                  color: colorList[list.dataIndex]["colorStart"],
                },
                {
                  offset: 1,
                  color: colorList[list.dataIndex]["colorEnd"],
                },
              ]);
            },
          },
        },
        data: [
          { value: 1048, name: "温度偏低" },
          { value: 735, name: "温度适宜" },
          { value: 735, name: "温度偏高" },
        ],
      },
    ],
  },
  //   饼图2
  circle2: {
    backgroundColor: "rgba(0,0,0,0)",
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: (list) => {
              // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
              var colorList = [
                {
                  colorStart: "#488BFF",
                  colorEnd: "#9abffd",
                },
                {
                  colorStart: "#26CEBA",
                  colorEnd: "#8efaed",
                },
                {
                  colorStart: "#26CEaA",
                  colorEnd: "#8efaad",
                },
              ];
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  //左、下、右、上
                  offset: 0,
                  color: colorList[list.dataIndex]["colorStart"],
                },
                {
                  offset: 1,
                  color: colorList[list.dataIndex]["colorEnd"],
                },
              ]);
            },
          },
        },
        data: [
          { value: 1048, name: "ph偏酸" },
          { value: 735, name: "ph中性" },
          { value: 735, name: "ph偏碱" },
        ],
      },
    ],
  },
  //   3柱状图
  zhu3: {
    backgroundColor: "rgba(0,0,0,0)",
    grid: { top: "10%", left: "12%", right: "5%", bottom: "12%" },
    legend: {
      show:true,
      data:['干旱','适宜','偏湿']
    },
    tooltip: {},
    dataset: {
      source: [
        ["product", "2015", "2016", "2017"],
        ["Matcha Latte", 43.3, 85.8, 93.7],
        ["Milk Tea", 83.1, 73.4, 55.1],
        ["Cheese Cocoa", 86.4, 65.2, 82.5],
      ],
    },
    xAxis: { type: "category",data:["2015", "2016", "2017"] },
    yAxis:{},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      {
        name:'干旱',
        type: "bar",
        barWidth: 15, //柱图宽度
        itemStyle: {
          barBorderRadius: [8, 8, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(
            //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
            //通过修改前4个参数，可以实现不同的渐变方向
            /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                      每项为一个对象，包含offset和color两个参数
                    */
            0,
            0,
            0,
            1,
            [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#007DDD",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#00A6FF",
              },
            ]
          ),
        },
        data:[43.3, 85.8, 93.7],
      },
      {
        name:'适宜',
        type: "bar",
        barWidth: 15, //柱图宽度
        itemStyle: {
          barBorderRadius: [8, 8, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(
            //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
            //通过修改前4个参数，可以实现不同的渐变方向
            /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                      每项为一个对象，包含offset和color两个参数
                    */
            0,
            0,
            0,
            1,
            [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#E56739",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#FF496A",
              },
            ]
          ),
        },
        data:[83.1, 73.4, 55.1]
      },
      {
        name:'偏湿',
        type: "bar",
        barWidth: 15, //柱图宽度
        itemStyle: {
          barBorderRadius: [8, 8, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(
            //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
            //通过修改前4个参数，可以实现不同的渐变方向
            /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                      每项为一个对象，包含offset和color两个参数
                    */
            0,
            0,
            0,
            1,
            [
              {
                //代表渐变色从正上方开始
                offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                color: "#6D5EFF",
              }, //柱图渐变色
              {
                offset: 1, //指100%处的颜色
                color: "#9484FC",
              },
            ]
          ),
        },
        data:[86.4, 65.2, 82.5]
      },
    ],
  },
  tableDate: [
    {
      first: " ",
      second: "非正常节点数",
      third: "设备数量",
      forth: "设备数量占总量比例",
    },
    {
      first: "总数",
      second: "2343",
      third: "22",
      forth: "43",
    },
    {
      first: "正常",
      second: "453",
      third: "33",
      forth: "44",
    },
    {
      first: "预警",
      second: "22",
      third: "33",
      forth: "44",
    },
    {
      first: "超限",
      second: "44",
      third: "22",
      forth: "33",
    },
    {
      first: "冻结",
      second: "11",
      third: "33",
      forth: "44",
    },
    {
      first: "督办",
      second: "11",
      third: "22",
      forth: "33",
    },
  ],
})
</script>

<style lang="scss" scoped>
.soilStat_wrapper {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: url("@/images/soil/soilBg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  color: #fff;
  font-weight: 600;
  flex-direction: column;

  .soil_title {
    width: 100%;
    text-align: center;
    font-size: 32px;

    div:nth-of-type(1) {
      font-weight: bolder;
      background-image: linear-gradient(#e2f0fe, #2b92b8);
      -webkit-background-clip: text;
      color: transparent;
      padding-top: 24px;
    }

    div:nth-of-type(2) {
      font-size: 12px;
    }
  }

  .soil_btns {
    height: 57px;
    display: flex;
    margin-top: 10px;

    >div {
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      padding: 0 150px;

      >div {
        font-size: 18px;
        cursor: pointer;
        width: 182px;
        line-height: 57px;
        text-align: center;
        background: url("@/images/soil/btn1.png") no-repeat;
        background-size: 100% 100%;
      }

      >div:hover {
        background: url("@/images/soil/btnBg.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .soil_total {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    padding: 0 80px;

    .soil_divs1,
    .soil_divs2,
    .soil_divs3,
    .soil_divs4,
    .soil_divs5,
    .soil_divs6 {
      width: 260px;
      height: 93px;
      background: url("@/images/soil/1.png") no-repeat;
      background-size: 100% 100%;

      >div:nth-of-type(1) {
        font-size: 14px;
        color: #1ff2ff;
        line-height: 40px;
        text-indent: 45px;
      }

      >div:nth-of-type(2) {
        font-size: 24px;
        color: #e8feff;
        line-height: 35px;
        text-indent: 70px;
      }
    }

    .soil_divs2 {
      background: url("@/images/soil/2.png") no-repeat;
      background-size: 100% 100%;
    }

    .soil_divs3 {
      background: url("@/images/soil/3.png") no-repeat;
      background-size: 100% 100%;
    }

    .soil_divs4 {
      background: url("@/images/soil/4.png") no-repeat;
      background-size: 100% 100%;
    }

    .soil_divs5 {
      background: url("@/images/soil/5.png") no-repeat;
      background-size: 100% 100%;
    }

    .soil_divs6 {
      background: url("@/images/soil/6.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  .soil_body {
    flex: 1;
    padding: 20px 80px;
    display: flex;

    .div_title {
      font-size: 20px;
      font-weight: bolder;
      width: 250px;
      height: 50px;
      line-height: 50px;
      background: url("@/images/soil/txtBg.png") no-repeat;
      background-size: 100% 100%;
      text-indent: 20px;
      margin-top: 15px;
    }

    .body_left,
    .body_right {
      flex: 1;
    }

    .body_middle {
      flex: 2;
      margin: 0 20px;

      >div {
        background: url("@/images/soil/divBg2.png") no-repeat;
        background-size: 100% 100%;
        margin-bottom: 20px;
      }

      .middle_top {
        display: flex;
        flex-direction: column;

        .echarts_box {
          flex: 1;
        }
      }

      .middle_bottom {
        display: flex;
        flex-direction: column;

        .table_div {
          border: 1px solid #2b7cb5;
          flex: 1;
          margin: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          >div {
            flex: 1;
          }

          >div:nth-of-type(1) {
            background: #0c70bd !important;
          }

          >div:nth-of-type(2n-1) {
            background: #0a436d;
          }

          .table_list {
            font-size: 14px;
            display: flex;
            align-items: center;
            text-align: center;

            >div:nth-of-type(1) {
              flex: 1;
            }

            >div:nth-of-type(2) {
              flex: 4;
            }

            >div:nth-of-type(3) {
              flex: 4;
            }

            >div:nth-of-type(4) {
              flex: 4;
            }
          }
        }
      }
    }

    .body_middle,
    .body_right {
      display: flex;
      flex-direction: column;

      >div {
        flex: 1;
      }
    }

    .body_left {
      background: url("@/images/soil/divBg1.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;

      >.echarts_box {
        flex: 1;
      }
    }

    .body_right {
      >div {
        background: url("@/images/soil/divBg3.png") no-repeat;
        background-size: 100% 100%;
        margin-bottom: 20px;
      }

      .right_top {
        display: flex;
        flex-direction: column;

        .div_map {
          width: 100%;
          flex: 1;
          text-align: center;

          img {
            width: 60%;
            height: 80%;
          }
        }
      }

      .right_bottom {
        display: flex;
        flex-direction: column;

        >.echarts_box {
          flex: 1;
        }
      }
    }
  }
}
</style>
